<template>
  <div class="drup">
      <div class="left_tabs">
          <van-sidebar v-model="activeKey">
            <van-sidebar-item v-for="v in drupList" :key="v.cat_id" :title="v.cat_name" />
          </van-sidebar>
      </div>
      <div class="right_contents">
          <div v-for="v in drupContent" :key="v.cat_id">
              <h2>///{{v.cat_name}}///</h2>
              <ul>
                  <li v-for="item in v.children" :key="item.cat_id">
                      <img :src="item.cat_icon" alt="">
                      <p>{{item.cat_name}}</p>
                  </li>
              </ul>
          </div>
      </div>
  </div>
</template>

<script>
import {drugShop} from '@/api/drugShop'
export default {
  data() {
    return {
      activeKey: 0,
      drupList:[],
    //   drupContent:[],
    };
  },
  computed:{
      drupContent(){
          return this.drupList.length?this.drupList[this.activeKey].children:[]
      }
  },
  created(){
      drugShop().then(res=>{
          this.drupList=res.data.message;
          console.log(this.drupList)
      })
  }
}
</script>

<style lang="scss">
.drup{
    width: 100%;
    height: 100%;
    display: flex;
    .right_contents{
        width: 80%;
        overflow: auto;
        div{
            width: 100%;
            text-align: center;
        }
        h2{
            margin:10px auto;
        }
        ul{
            display: flex;
            flex-wrap: wrap;
            li{
                margin:10px 13px; 
                text-align: center;
            }
            img{
                width: 50px;
                height: 50px;
                margin:2px;
            }
        }
    }
    .left_tabs{
        width: 20%;
        overflow: auto;
    }
}
</style>